<template>
	<view class="container">
		<view class="bg-colore"></view>
		<view class="content">
			<topLogo title="未来商圈"></topLogo>
			<view class="banner_div">
				<view class="wrap">
					<uni-swiper-dot class="uni-swiper-dot-box" :info="banner" mode="round" :current="current"
						:dots-styles="swiperData">
						<swiper class="swiper-box" :current="swiperDotIndex" @change="change" autoplay="auto">
							<swiper-item v-for="(item, index) in banner" :key="index"
								@click="item.url ? $public.navto(item.url) : ''">
								<image mode="scaleToFill" class="swiperimage" :src="$public.imgageUrl(item.images)"></image>
							</swiper-item>
						</swiper>
					</uni-swiper-dot>
				</view>
			</view>
			<!-- 	<view class="banner_div">
				<view class="wrap">
					<view class="" v-for="(item, index) in banner" :key="index" v-if="index<5">
						<image mode="scaleToFill" class="banner_image" :src="$public.imgageUrl(item.images)"
							@click="$public.navto('shequtuangou')">
						</image>
					</view>
				</view>
			</view> -->
			<view class="wrap ">
				<view class="material-column">
					<uni-grid :column="4" :show-border="false" :square="false">
						<uni-grid-item v-for="(item,index) in changYongData" :key="index">
							<view class="grid-item-box" @click="$public.navto('shequtuangou')" v-if="item.title=='社区团购'">
								<view class="image-div">
									<image class="image" :src="$public.imgageUrl(item.images)" mode="aspectFit" />
								</view>
								<view class="text">{{item.title}}</view>
							</view>
							<view class="grid-item-box" @click="$public.navto('fuLiJiQi')" v-else-if="item.title=='福利机器'">
								<view class="image-div">
									<image class="image" :src="$public.imgageUrl(item.images)" mode="aspectFit" />
								</view>
								<view class="text">{{item.title}}</view>
							</view>
							<!-- <view class="grid-item-box" @click="$public.navto('fuJinShangJia')" v-else-if="item.title=='本地套餐'">
								<view class="image-div">
									<image class="image" :src="$public.imgageUrl(item.images)" mode="aspectFit" />
								</view>
								<view class="text">{{item.title}}</view>
							</view> -->
							<view class="grid-item-box" @click="openGongNeng(item)" v-else>
								<view class="image-div">
									<image class="image" :src="$public.imgageUrl(item.images)" mode="aspectFit" />
								</view>
								<view class="text">{{item.title}}</view>
							</view>
						</uni-grid-item>

					</uni-grid>
				</view>
			</view>
			<!--优惠券入口 -->
			<view class="wrap ">
				<view class="tejialiangtu">
					<!-- <view class="right tjdiv" @click="zhengdianData.url ? $public.navto(zhengdianData.url) : ''"> -->
					<view class="right tjdiv" @click="$public.navto('/pages/daPai/qiangJuan')">
						<image :src=" $public.imgageUrl('https://wenlinquan.oss-cn-beijing.aliyuncs.com/2023-10-18/2023101815504619236719-898b-4fb0-b8f8-4b71091161ac.png')" mode="scaleToFill" class="image">
						</image>
					</view>
				</view>
			</view>

			<view class="wrap ">
				<view class="cygn-div">
					<jxwTitle title="附近1公里" :showMore="true" url="fuJinShangJia"></jxwTitle>
					<view class="jrjg-div">
						<view class="jrjg-list" v-for="(item,index) in sjList" :key="index" v-if="index<6"
							@click="$public.navto('dianPu',{applyId:item.applyId})">
							<image :src="$public.imgageUrl(item.params.product[0].smallImage)" mode="scaleToFill" class="image">
							</image>
							<view class="title1">
								{{item.params.product[0].title}}
							</view>
							<view class="title2">
								抢购价：<text class="redzi">￥{{item.params.product[0].json.money}}</text>
							</view>
							<view class="title3">
								<image src="/static/sj_sq_jf.png" mode="scaleToFill" class="image"></image> 返<text
									class="redzi">{{item.params.product[0].json.fanJf}}</text>积分
							</view>
						</view>
					</view>
				</view>

			</view>
		</view>
	</view>

</template>

<script>
	/* import {
		mapState
	} from 'vuex'
	import share from '@/store/index.js' */
	export default {
		data() {
			return {
				banner: [],
				notice: "",
				productList: [],
				changYongData: [],
				tzList: [],
				yyzdjList: [],
				sjList: [],
				myLocation: null,
				swiperData: {
					selectedBackgroundColor: "#1ca7ec",
					selectedBorder: "#1ca7ec",
					backgroundColor: "#d3d3d3",
					border: "#d3d3d3",
				},
				swiperDotIndex: 0,
				current: 0,
			}
		},
		async onLoad() {
			this.getArticle18();
			this.getArticle19();
			this.getArticle20();

		},
		onShow() {
			this.getShangJiaList()
		},
		methods: {
			change(e) {
				this.current = e.detail.current
			},
			getArticle18() {
				let that = this
				this.$public.htmlPost("/api/getArticle", {
					columnId: 18,
					tj: ""
				}).then((res) => {
					console.log("getBanner res", res)
					let data = res.data;
					if (data.code == 0) {
						data.data.forEach(item => {
							item.showVideo = false
						})
						that.banner = data.data
					}
					uni.hideLoading();
				})
			},
			getArticle20() {
				let that = this
				this.$public.htmlPost("/api/getArticle", {
					columnId: 20,
					tj: 0
				}).then((res) => {
					console.log("getArticle20 res", res)
					let data = res.data;
					if (data.code == 0) {
						that.yyzdjList = data.data
					}
				})
			},
			getArticle19() {
				let that = this
				this.$public.htmlPost("/api/getArticle", {
					columnId: 19,
					tj: 0
				}).then((res) => {
					console.log("getChangYong res", res)
					let data = res.data;
					if (data.code == 0) {

						that.changYongData = data.data
						that.changYongData.forEach(item => {
							item.json = JSON.parse(item.remark)
						})
					}
				})
			},
			getShangJiaList() {
				let that = this
				this.$public.getLocation()
				let location = uni.getStorageSync('setLocation');
				if (location) {
					this.myLocation = location
				}
				// console.log("this.myLocation", this.myLocation)
				this.$public.htmlPost("/api/getShangJiaList").then((res) => {
					console.log("getShangJiaList res", res)
					let data = res.data;
					that.sjList = []
					if (data.code == 0) {
						data.data.forEach(item => {
							let arr = item.bak1.split(",");
							item.lat = arr[0];
							item.lng = arr[1];
							item.juli = that.$public.distance(item.lat, item.lng, that.myLocation.lat, that.myLocation.lng)
							if (item.params.product.length > 0) {
								item.params.product.forEach(proitem => {
									proitem.json = JSON.parse(proitem.referenceMoney)
								})
								that.sjList.push(item)
							}

						})
						that.sjList.sort(function(a, b) {
							return a.juli - b.juli
						});

						// this.sjList = data.data
					}
				})
			},
			openGongNeng(item) {
				if (!item.json.appid)
					this.$api.msg("暂未开放")
				else
					this.$public.gotoMiniProgram(item.json.appid, item.json.appurl)
			}
		},
	}
</script>

<style lang="scss" scoped>
	.content {
		// background-color: #fff;
		background: url(#{$imageUrl}/webbg.png) top center no-repeat;
		background-size: 100% auto;

		.wrap {
			padding: $uni-wrap-padding;
		}


		// .banner_div {
		// 	margin: 30rpx 0;

		// 	.banner_image {
		// 		width: 100%;
		// 		height: 368rpx;
		// 	}
		// }

		.banner_div {
			padding: 30rpx 0;


			.banner_image {
				width: 100%;
				height: 368rpx;
			}

			.swiper-box {
				height: 344rpx;
			}

			.swiperimage {
				width: 100%;
				height: 100%;
				border-radius: 20rpx;
				// overflow: hidden;
			}
		}

		.tz-div {
			padding: 0 30rpx;
			display: flex;
			align-items: center;
			justify-content: space-around;
			background: url(#{$imageUrl}/tzbg.png) top center no-repeat;
			background-size: 100% auto;
			height: 180rpx;

			.tz-left {
				margin-right: 30rpx;

				.image {
					width: 74rpx;
					height: 72rpx;
				}
			}

			.tz-right {
				.tz-title {
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-size: 32rpx;
					font-weight: bold;
					color: #333333;
					margin-bottom: 10rpx;

					.image {
						width: 32rpx;
						height: 32rpx;
					}
				}

				.tz-abstract {
					font-size: 24rpx;
					color: #666666;
				}
			}
		}

		.cygn-div {
			background: #fff;
			border-radius: 16rpx;
			padding: 30rpx 48rpx;
			margin-top: 30rpx;
		}

		.app-title {
			margin-bottom: 0;
		}

		.material-column {
			.image-div {
				// width: 116rpx;
				// height: 116rpx;
				// background: #f3f3f3;
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: space-around;
				margin: 40rpx auto 10rpx;

				.image {
					width: 136rpx;
					height: 136rpx;
				}
			}

			.text {
				text-align: center;
				width: 130rpx;
				color: #666666;
				margin: 0 auto;
				// line-height: 2;
				font-size: 28rpx;
			}
		}

	}

	.uucdj-div {
		margin-top: 40rpx;

		.uucdj {
			width: 100%;
			height: 188rpx;
		}
	}
    .tejialiangtu {
    	display: flex;
    	align-items: center;
    	justify-content: space-between;
    	margin: 20rpx 0;
    
    	.tjdiv {
    		display: flex;
    		align-items: center;
    		justify-content: center;
    		width: 692rpx;
    		height: 200rpx;
    		position: relative;
    		color: #fff;
    		font-size: 32rpx;
    
    		.image {
    			width: 100%;
    			height: 200rpx;
    			position: absolute;
    			left: 0;
    			top: 0;
    			z-index: -1;
    		}
    
    		// background: url(/static/sj_dp_tjyy.png) top center no-repeat;
    
    		// background-size: 100% auto;
    	}
    }
	.jrjg-div {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;

		.jrjg-list {
			width: 280rpx;
			background: #FAFAFA;
			border-radius: 16rpx;
			overflow: hidden;
			font-size: 28rpx;
			margin-bottom: 30rpx;

			.image {
				width: 280rpx;
				height: 280rpx;
			}

			.title1 {
				padding: 0 16rpx;
				color: #333333;
				margin-top: 24rpx;
			}

			.title2 {
				padding: 0 16rpx;
				margin: 8rpx 0 16rpx;
				color: #999999;
				font-size: 26rpx;

				.redzi {
					font-size: 32rpx;
				}
			}

			.title3 {
				padding: 0 16rpx;
				color: #666666;
				margin-bottom: 16rpx;
				display: flex;
				align-items: center;

				.image {
					width: 24rpx;
					height: 24rpx;
					margin-right: 15rpx;
				}
			}

			.redzi {
				color: #DF686A;
			}
		}
	}
</style>